iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
Modern Web

基礎網頁開發30天系列 第 13

Day 13 CSS 細部增加及調整

  • 分享至 

  • xImage
  •  
main h1{
    padding: 1rem 4rem;
    font-size: 1.4rem;
    margin: 0rem 3rem;
    font-style: oblique;
    background-color:rgb(237, 235, 235);
}

h1 a {
    padding: 1rem 4rem;
    font-size: 1.4rem;
    margin: 0rem 3rem;
    font-style: oblique;
    color: black; /* 设置链接文本颜色为橙色 */
    text-decoration: none; /* 移除下划线效果 */
    transition: color 0.3s; /* 添加颜色过渡效果 */
}

h1 a:hover {
    color: rgb(255, 0, 0);
    text-decoration: underline; 
}

main h2{
    padding: 1rem 4rem;
    font-size: 1.4rem;
    margin: 0rem 3rem;
    font-style: oblique;
}

主要增加以下項目
nav.navigation ul li:hover:裡的

  • transform: scale(1.1);在鼠標懸停時將元素放大 1.1 倍
  • text-decoration: underline; 添加添加下划線到文本。

main h1:

  • font-style: oblique; 將文本的字體樣式設置為斜體。

h1 a:

  • color: black; 設置連結文本顏色為黑色。
  • text-decoration: none; 移除連結文本的下划線效果。
  • transition: color 0.3s; 添加顏色過度效果,使顏色變化平滑。

h1 a:hover:

  • color: rgb(255, 0, 0); 設置懸停時連結文本的顏色為红色。
  • text-decoration: underline; 添加下划線效果到懸停時的連結文本。

調整結果:
https://ithelp.ithome.com.tw/upload/images/20230926/20162177X6UkplwUyP.png

https://ithelp.ithome.com.tw/upload/images/20230926/20162177zLG76Zboly.png


上一篇
Day 12增加圖片及連結
下一篇
Day 14 Footer
系列文
基礎網頁開發30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言